<template>
    <!-- 年度开工率 -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="100%"
      width="100%"
    ></Echart>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
          title: {
            text: "",
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['DN80','DN100','DN150'],
            textStyle: {
              fontSize: 12,
              color: 'rgb(0,253,255,0.6)'
            },
            right: '4%'
          },
          grid: {
            top: '14%',
            left: '4%',
            right: '4%',
            bottom: '12%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: newData.xdata,
            axisLabel: {
              textStyle: {
                color: 'rgb(0,253,255,0.6)'
              },
              formatter: function(params) {
                return params.split(' ')[0]
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: 'rgb(0,253,255,0.6)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgb(23,255,243,0.3)'
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgb(0,253,255,0.6)'
              }
            }
          },
          series: [
            {
              name: "DN80",
              type: "line",
              itemStyle:{ normal:{ color:'rgba(23, 255, 243)' } },
              areaStyle: {
                normal: {
                  color:  new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(23, 255, 243' + ', 0.6)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(23, 255, 243' + ', 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              data: newData.lineData1
            },{
              name: "DN100",
              type: "line",
              itemStyle:{ normal:{ color:'rgba(119,61,190)' } },
              areaStyle: {
                normal: {
                  color:  new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(119,61,190' + ', 0.6)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(119,61,190' + ', 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              data: newData.lineData2
            },{
              name: "DN150",
              type: "line",
              itemStyle:{ normal:{ color:'rgba(163,163,163)' } },
              areaStyle: {
                normal: {
                  color:  new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(163,163,163' + ', 0.6)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(163,163,163' + ', 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              data: newData.lineData3
            }
          ]
        }
      },
      immediate: true,
      deep: true
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
